<template>
  <div class="register-container">
    <div class="register-box">
      <h1 class="register-title">用户注册</h1>
      <form @submit.prevent="handleRegister" class="register-form">
        <!-- 用户名 -->
        <div class="form-group inline-label">
          <label for="username">用户名</label>
          <input
            type="text"
            id="username"
            v-model="form.username"
            placeholder="请输入用户名"
            required
          />
        </div>

        <!-- 密码 -->
        <div class="form-group inline-label">
          <label for="password">密码</label>
          <input
            type="password"
            id="password"
            v-model="form.password"
            placeholder="请输入密码"
            required
          />
        </div>

        <!-- 确认密码 -->
        <div class="form-group inline-label">
          <label for="confirmPassword">确认密码</label>
          <input
            type="password"
            id="confirmPassword"
            v-model="form.confirmPassword"
            placeholder="请再次输入密码"
            required
          />
        </div>

        <!-- 手机号 -->
        <div class="form-group inline-label">
          <label for="phone">手机号</label>
          <input
            type="tel"
            id="phone"
            v-model="form.phone"
            placeholder="请输入手机号"
            required
          />
        </div>

        <!-- 邮箱 -->
        <div class="form-group inline-label">
          <label for="email">电子邮箱</label>
          <input
            type="email"
            id="email"
            v-model="form.email"
            placeholder="请输入电子邮箱"
            required
          />
        </div>

        <!-- 身份选择 -->
        <div class="form-group inline-label">
          <label>身份选择</label>
          <div class="radio-options">
            <label class="radio-label">
              <input
                type="radio"
                v-model="form.role"
                value="candidate"
                checked
              />
              应聘者
            </label>
            <label class="radio-label">
              <input
                type="radio"
                v-model="form.role"
                value="employer"
              />
              招聘者
            </label>
          </div>
        </div>

        <!-- 注册按钮 -->
        <button type="submit" class="register-btn" :disabled="loading">
          <span v-if="!loading">注册</span>
          <span v-else>注册中...</span>
        </button>
      </form>

      <!-- 错误提示 -->
      <div v-if="errorMessage" class="error-message">{{ errorMessage }}</div>

      <!-- 跳转到登录 -->
      <div class="login-link">
        已有账号？<router-link to="/">立即登录</router-link>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import apiClient from '@/utils/api'

export default {
  name: 'RegisterView',
  setup () {
    const router = useRouter()
    const form = ref({
      username: '',
      password: '',
      confirmPassword: '',
      phone: '',
      email: '',
      role: 'candidate' // 默认选中应聘者
    })

    const loading = ref(false)
    const errorMessage = ref('')

    const validateForm = () => {
      if (form.value.password !== form.value.confirmPassword) {
        errorMessage.value = '两次输入的密码不一致'
        return false
      }

      // 简单的手机号格式验证
      const phoneRegex = /^1[3-9]\d{9}$/
      if (!phoneRegex.test(form.value.phone)) {
        errorMessage.value = '请输入正确的手机号'
        return false
      }

      // 简单的邮箱格式验证
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
      if (!emailRegex.test(form.value.email)) {
        errorMessage.value = '请输入正确的邮箱地址'
        return false
      }

      errorMessage.value = ''
      return true
    }

    const handleRegister = async () => {
      if (!validateForm()) return

      loading.value = true

      try {
        const response = await apiClient.post('/user/register', {
          username: form.value.username,
          password: form.value.password,
          phone: form.value.phone,
          email: form.value.email,
          userType: form.value.role
        })

        if (response.data.code === '200') {
        // 注册成功，跳转到登录页面
          alert('注册成功，请登录')
          router.push('/')
        } else if (response.data.code === '500') {
          errorMessage.value = response.data.msg || '注册失败'
        }
      } catch (error) {
        if (error.response) {
        // 服务器返回了错误响应
          errorMessage.value = error.response.data.msg || '注册失败，请稍后重试'
        } else {
          errorMessage.value = '网络错误，请检查连接'
        }
      } finally {
        loading.value = false
      }
    }

    return {
      form,
      loading,
      errorMessage,
      handleRegister
    }
  }
}
</script>

<style scoped>
/* 基础样式 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 注册容器 */
.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f7fa;
  background-image: linear-gradient(120deg, #f6f7f9 0%, #e7f0fd 100%);
  padding: 20px;
}

/* 注册框 */
.register-box {
  width: 100%;
  max-width: 450px;
  padding: 2.5rem;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 标题 */
.register-title {
  margin-bottom: 1.5rem;
  color: #1890ff;
  text-align: center;
  font-size: 1.8rem;
  font-weight: 500;
}

/* 表单样式 */
.register-form .form-group {
  margin-bottom: 1.5rem;
}

/* 新增：label 和 input 在同一行 */
.register-form .form-group.inline-label {
  display: flex;
  align-items: center;
}

.register-form .form-group.inline-label label {
  flex: 0 0 30%; /* label 占据 30% 的宽度 */
  margin-right: 1rem; /* label 和 input 之间的间距 */
  text-align: left; /* label 文字左对齐 */
}

.register-form .form-group.inline-label input,
.register-form .form-group.inline-label .radio-options {
  flex: 1; /* input 或 radio options 占据剩余空间 */
}

.register-form .form-group.inline-label .radio-options {
  display: flex;
  gap: 1rem; /* radio options 之间的间距 */
}

.radio-label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.radio-label input[type="radio"] {
  margin-right: 0.5rem; /* radio 和文字之间的间距 */
}

.register-form input[type="text"],
.register-form input[type="password"],
.register-form input[type="email"],
.register-form input[type="tel"] {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 1rem;
  transition: border-color 0.3s;
}

.register-form input:focus {
  border-color: #1890ff;
  outline: none;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

/* 注册按钮 */
.register-btn {
  width: 100%;
  padding: 0.75rem;
  margin-top: 0.5rem;
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s;
}

.register-btn:hover {
  background-color: #40a9ff;
}

.register-btn:disabled {
  background-color: #a8d1ff;
  cursor: not-allowed;
}

/* 错误提示 */
.error-message {
  margin-top: 1rem;
  padding: 0.75rem;
  background-color: #fff2f0;
  border: 1px solid #ffccc7;
  color: #ff4d4f;
  border-radius: 4px;
  text-align: center;
  font-size: 0.9rem;
}

/* 登录链接 */
.login-link {
  margin-top: 1.5rem;
  text-align: center;
  color: #666666;
}

.login-link a {
  color: #1890ff;
  text-decoration: none;
}

.login-link a:hover {
  text-decoration: underline;
}
</style>
